<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .classes-box {
            margin: 0 20px 10px;
            box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
            display: flex;
            padding: 20px;

        }

        .classes-box li {
            padding: 6px 12px;
            height: 19px;
            margin-right: 40px;
            color: #555666;
            background-color: #f2f2f2;
            border-radius: 8px;
            line-height: 16px;
        }

        .classes-box li:hover {
            background-color: #b2b0b0;
        }
    </style>
</head>
<body>
<ul class="classes-box">
{#i得到是表里面的每一条数据，一个对象，得到表里面的字段 对象的属性#}
    {% for i in classes %}
        <li {% if now_classes == i.name %}style="background-color: black;color: white"{% endif %}>
            <a href="/demo/nav/{{ i.name }}/">
                {{ i.name|capfirst }}
            </a>
        </li>

    {% endfor %}

</ul>

</body>
</html>